<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios练习</title>
	</head>
	<body>
		<h1>axios ajax调用</h1>
		<form action="http://localhost:8090/addUser" method="post">
			<input name="name" value="玉兔" />
			<input name="age" value=99 />
			<input name="sex" value="女" />
			<button >提交</button>
		</form>
		
		<script src="../js/axios.js"></script>
		<script>
			
			//编辑ajax请求
			/* 1.get请求 */
			axios.get("http://localhost:8090/getUser")
				  .then(function(result){
					  //data 时Axios封装的promise对象
					  //注意事项:获取服务器返回值通过data属性
					  console.log(result.data)
				  })
			
			axios.get("http://localhost:8090/getUserById?id=999")
				.then(function(result){
					console.log(result.data)
				})
			
			/* params 对象提交 */
			axios.get("http://localhost:8090/getUserById",{
				params : {
					id: 999
				}
			})
			.then((result) => {
				console.log(result.data)
			})
				// .then(function(result){
				// 	console.log(result.data)
				// })
				
			/* 利用restful 风格实现数据提交传参 
				restFul: 参数使用/分割 ; url 中不可出现动词
				*/
			axios.get("http://localhost:8090/user/3	")
				.then((result) => {
					console.log("aaa")
					console.log(result.data)
				})
			
			//ajax 删除操作
			axios.delete("http://localhost:8090/user/230")
				.then((result) => {
					console.log(result.data)
				})
				
			//请求类型:post/put delete 
			/* 1.对象的方式提交 */
			axios.post("http://localhost:8090/addUser",{
				name: "黑熊2",
				age: 3000,
				sex: "男"
			}).then((result) => {
				console.log("post")
				console.log(result.data)
			})
			
			/* 
			 2.axios 利用form表单提交对象
			 */
			let params=new URLSearchParams();
			params.append("name","达瓦尼氏")
			params.append("age",22)
			params.append("sex","男")
			axios.post("http://localhost:8090/addUserForm",params)
				.then( result => {
					console.log("form提交成功")
					console.log(result.data)
				})
				
		    /* 
				restFul方式实现表单数据提交
			*/
		   axios.post("http://localhost:8090/user/达瓦尼氏/250/男")
		   	.then( result => {
		   		console.log("form提交成功")
		   		console.log(result.data)
		   	})
			
			/* 
			 put请求
			 需求:修改id:248的name="韩国傻吊" 要求使用restful
			 */
			axios.put("http://localhost:8090/user/248/韩国憨憨")
				.then( result => {
					console.log("form提交成功")
					console.log(result.data)
				})
				
			//设定基本的请求路径
			axios.defaults.baseURL="http://localhost:8090"
			axios.put("/user/248/韩国憨")
				.then(result => {
					console.log("欧亚亚")
					console.log(result.data)
				})
			
			
			
			
		</script>
	</body>
</html>
